<template>
	<view class="tools">
		<u-form-item
			:label="configs.label"
			:prop="configs.key"
			:required="configs.required"
			:label-width="configs.labelWidth"
			:label-position="configs.labelPosition"
			v-if="configs.hasOwnProperty('label')"
		>
			<view
				v-if="configs.tag === 'view'"
				:style="{ color: configs.activeColor }"
				>{{ configs.value }}</view
			>
			<u-input
				v-model="value"
				v-if="configs.tag === 'u-input'"
				@click="handlerActive"
				:border="configs.border"
				:type="configs.type"
				:placeholder="configs.placeholder"
				:clearable="configs.clearable"
				:disabled="configs.disabled"
			/>
			<u-input
				v-model="value"
				v-if="configs.tag === 'u-input-textarea'"
				type="textarea"
				:border="configs.border"
				@click="handlerActive"
				:placeholder="configs.placeholder"
				:height="configs.height"
				:clearable="configs.clearable"
				:disabled="configs.disabled"
			/>
			<u-input
				v-model="value"
				v-if="configs.tag === 'u-input-password'"
				type="password"
				:border="configs.border"
				@click="handlerActive"
				:password-icon="configs.passwordIcon"
				:placeholder="configs.placeholder"
				:clearable="configs.clearable"
				:disabled="configs.disabled"
			/>
			<u-input
				v-model="configs.valueLabel"
				v-if="configs.tag === 'u-input-select'"
				@click="handlerActive('select')"
				:border="configs.border"
				:placeholder="configs.placeholder"
				type="select"
				:select-open="selectShow"
			/>
			<u-input
				v-model="value"
				style="display: none"
				v-if="configs.tag === 'u-input-select'"
				type="select"
			/>
			<u-input
				v-model="value"
				v-if="configs.tag === 'u-input-picker'"
				type="select"
				:border="configs.border"
				:select-open="pickerShow"
				@click="handlerActive('picker')"
				:clearable="configs.clearable"
				:disabled="configs.disabled"
				:placeholder="configs.placeholder"
			/>
			<u-rate
				:count="configs.count"
				v-if="configs.tag === 'u-rate'"
				v-model="value"
				:active-color="configs.activeColor"
				:inactive-color="configs.inactiveColor"
				:gutter="configs.gutter"
				:size="configs.size"
				:disabled="configs.disabled"
			></u-rate>
			<u-checkbox-group
				v-if="configs.tag === 'u-checkbox-group'"
				:wrap="configs.wrap"
				:max="configs.max"
				:activeColor="configs.activeColor"
				:disabled="configs.disabled"
				:size="configs.size"
				:width="configs.width"
				@change="checkboxGroupChange"
			>
				<u-checkbox
					v-model="item.checked"
					v-for="(item, index) in configs.options"
					:key="index"
					:name="item.value"
					:shape="configs.shape"
					>{{ item.label }}</u-checkbox
				>
			</u-checkbox-group>
			<u-radio-group
				v-if="configs.tag === 'u-radio-group'"
				:wrap="configs.wrap"
				:activeColor="configs.activeColor"
				:disabled="configs.disabled"
				:size="configs.size"
				:width="configs.width"
				v-model="value"
				:shape="configs.shape"
			>
				<u-radio
					v-for="(item, index) in configs.options"
					:key="index"
					:name="item.value"
					>{{ item.label }}</u-radio
				>
			</u-radio-group>
			<u-switch
				v-if="configs.tag === 'u-switch'"
				:size="configs.size"
				:disabled="configs.disabled"
				:active-color="configs.activeColor"
				:inactive-color="configs.inactiveColor"
				:active-value="configs.activeValue"
				:inactive-value="configs.inactiveValue"
				@change="handlerSwitchChange"
				v-model="switchValue"
			></u-switch>
			<u-upload
				v-if="configs.tag === 'u-upload'"
				ref="uUpload"
				:action="configs.action"
				:auto-upload="false"
				:max-size="configs.maxSize * 1024 * 1024"
				:max-count="configs.maxCount"
				:disabled="configs.disabled"
				@on-list-change="listChange"
			></u-upload>
		</u-form-item>
		<view style="display: flex; justify-content: center">
			<u-button
				v-if="configs.tag === 'u-button'"
				style="width: 100%"
				:type="configs.buttonType"
				:form-type="configs.formType"
				:size="configs.buttonSize"
				:plain="configs.plain"
				:disabled="configs.disabled"
				:shape="configs.shape"
				@click="handlerButtonClick"
			>
				{{ value }}
			</u-button>
		</view>
		<u-select
			v-if="configs.tag === 'u-input-select'"
			:mode="configs.selectMode"
			:list="configs.options"
			v-model="selectShow"
			@confirm="selectConfirm"
		></u-select>
		<u-divider
			:color="configs.color"
			:border-color="configs.borderColor"
			:fontSize="configs.fontSize"
			:height="configs.height"
			v-if="configs.tag === 'u-divider'"
			:use-slot="configs.useSlot"
			>{{ value }}</u-divider
		>
		<u-picker
			:mode="configs.pickerMode"
			v-if="configs.tag === 'u-input-picker'"
			:params="configs.params"
			v-model="pickerShow"
			@confirm="pickerConfirm"
		></u-picker>
	</view>
</template>

<script>
let unwatch
export default {
	props: {
		config: {
			type: Object,
			default: () => {},
		},
		activeItemId: {
			type: Number,
			default: 0,
		},
		form: {
			type: Object,
			default: () => {},
		},
	},
	computed: {
		// configs() {
		// 	return this.config
		// },
		forms() {
			return this.form
		},
	},
	data() {
		return {
			value: '',
			selectShow: false,
			pickerShow: false,
			switchValue: false,
			configs: {},
		}
	},
	mounted() {
		unwatch = this.$watch(
			'config.value',
			function (val) {
				if (this.config.activeValue && this.config.inactiveValue) {
					if (this.config.activeValue === val) {
						this.switchValue = true
					} else if (this.config.inactiveValue === val) {
						this.switchValue = false
					} else {
						return false
					}
				}
				this.value = val
				this.configs = this.$u.deepClone(this.config)
				if (unwatch) {
					unwatch()
				}
			},
			{ immediate: true },
		)
	},
	watch: {
		value(val) {
			if (this.configs.tag === 'u-button') return
			this.$emit('value', val, this.configs.id, this.configs.valueLabel)
		},
	},
	methods: {
		handlerButtonClick() {
			this.$emit('handlerButtonClick', this.configs)
		},
		listChange(list) {
			this.$emit('fileListChange', list, this.configs.id)
		},
		handlerSwitchChange(val) {
			this.value = val
		},
		checkboxGroupChange(val) {
			this.value = val.join(',')
		},
		selectConfirm(val) {
			if (val.length > 1) {
				this.value = val.map(i => i.value).join(',')
				this.configs.valueLabel = val.map(i => i.label).join('-')
			} else {
				this.value = val[0].value
				this.configs.valueLabel = val[0].label
			}
		},
		pickerConfirm(val) {
			if (this.configs.pickerMode === 'time') {
				this.value = Object.values(val).join('-')
			} else {
				this.value = Object.values(val)
					.map(i => i.label)
					.join('-')
			}
		},
		handlerActive(val) {
			if (val === 'select' && !this.configs.disabled) {
				this.selectShow = true
			}
			if (val === 'picker' && !this.configs.disabled) {
				this.pickerShow = true
			}
			this.$emit('handlerActive', this.configs.id)
		},
		handlerdel(event) {
			event.stopPropagation()
			event.preventDefault()
			this.$emit('del', this.configs)
		},
	},
}
</script>

<style lang="scss">
.tools {
	.del {
		display: initial;
		position: absolute;
		right: 0;
		background: red;
		color: #fff;
		padding: 0 3px;
		font-size: 12px;
		cursor: pointer;
		z-index: 3;
	}
}
</style>